<template>
  <a-popconfirm
    :title="title"
    :ok-text="okText"
    :cancel-text="cancelText"
    ok-type="danger"
    @confirm="$emit('confirm')"
    @cancel="$emit('cancel')"
  >
    <slot>
      <a-button danger :loading="loading" :disabled="disabled">
        <template #icon><DeleteOutlined /></template>
        {{ buttonText }}
      </a-button>
    </slot>
  </a-popconfirm>
</template>

<script setup lang="ts">
import { DeleteOutlined } from '@ant-design/icons-vue'

interface Props {
  title?: string
  okText?: string
  cancelText?: string
  buttonText?: string
  loading?: boolean
  disabled?: boolean
}

interface Emits {
  (e: 'confirm'): void
  (e: 'cancel'): void
}

withDefaults(defineProps<Props>(), {
  title: '确定要删除吗？',
  okText: '确定删除',
  cancelText: '取消',
  buttonText: '删除',
  loading: false,
  disabled: false
})

defineEmits<Emits>()
</script>
